<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>MQ监控</title>

	<link href="../css/thirdParty/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<style>
		.input-append .add-on,
		.input-prepend .add-on {
			background-color: #e17a1f;!important;
		}
		.add-on>i{
			color:white;
		}
		.table-head{padding-right:17px;background-color: rgba(153, 153, 153, 0.42);color:#000;}
		.table-body{width:100%; height:215px;overflow-y:auto;}
		.table-head table,.table-body table{width:100%;}
		/*.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}*/
	</style>

</head>

<body id="body">
	<div class="row bg-light">
		<div class="col-lg-12 col-sm-12 breadcrumb bg-light">
			<li class="breadcrumb-item">基础服务功能</li>
			<li class="breadcrumb-item"><a data-load-page="serviceList" href="#">服务集群管理</a></li>
			<li class="breadcrumb-item"><span id="servName"></span><span>监控</span></li>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="form-inline mt-md-0 mr-2 pt-1 float-right" >
				<div class="input-group">
					<select class="custom-select custom-select-icon" id="S_SERVICE_TYPE">
						<option value = "300">Last 5 Minites</option>
						<option selected value ="1800">Last 30 Minites</option>
						<option value ="3600">Last 1 Hour</option>
						<option value ="86400">Last 24 Hour</option>
					</select>
				</div>
				<div class="ml-3">
					<button class="btn btn-outline-success" onclick="searchService();"><i class="iconfont ibsp-chaxun mr-1"></i>搜索</button>
				</div>
			</div>
			<div class="btn-group float-left mr-0">
				<label class="mt-2">开始时间：</label>
				<div class="date input-append form_datetime pull-right" data-date="" data-date-format="yyyy-mm-dd HH:ii:ss" data-link-field="from_date" style="">
					<input id="from_date" class="form-control calendar-input" type="text" value="" >
					<span class="add-on"><i class="icon-th iconfont"></i></span>
				</div>
				<label class="ml-3 mt-2">结束时间：</label>
				<div class="input-append date form_datetime pull-right " data-date="" data-date-format="yyyy-mm-dd HH:ii:ss" data-link-field="to_date" style="">
					<input id="to_date" class="form-control calendar-input" type="text" value="" >
					<span class="add-on"><i class="icon-th iconfont"></i></span>
				</div>

			</div>
		</div>
	</div>


	<div class="container-fuild" id="ems" style="height: calc(100% - 150px);">

		<div class="row" style="height: 100%;">
			<div class="col-sm-12 col-md-4" style="height: 100%;">
				<div class="card card-outline-info text-center" style="height: 48%">
					<div class="card-block">
						<h4 class="card-title">VBroker监控数据</h4>
						<blockquote class="card-blockquote">
							<div style="width: 100%;">
								<div class="table-body">
									<table class="table table-sm">
										<!--<colgroup><col style="width: 20%;" /><col /></colgroup>-->
										<thead class="table-head">
										<tr><th>#</th><th>生产速率</th><th>生产总数</th><th>消费速率</th><th>消总数</th></tr>
										</thead>
										<tbody id="vbCollectTable"  class="table-body">

										</tbody>
									</table>
								</div>
							</div>
						</blockquote>
					</div>
				</div>
				<br>
				<div class="card card-outline-info text-center" style="height: 48%">
					<div class="card-block">
						<h4 class="card-title">Queue监控数据</h4>
						<blockquote class="card-blockquote">
							<div style="width: 100%;">
								<div style="width: 100%;">
									<div class="table-body">
										<table class="table table-sm">
											<!--<colgroup><col style="width: 20%;" /><col /></colgroup>-->
											<thead class="table-head">
											<tr><th>#</th><th>生产速率</th><th>生产总数</th><th>消费速率</th><th>消总数</th></tr>
											</thead>
											<tbody id="queueCollectTable"  class="table-body">

											</tbody>
										</table>
									</div>
								</div>
							</div>
							<footer>共计 <cite title="">Source Title</cite></footer>
						</blockquote>
					</div>
				</div>
			</div>
			<div class="col-sm-8">
				<div class="card card-outline-info text-center" style="height: 48%">
					<div class="card-block" id="vbHisDiv" style="height: 100%">
					</div>
				</div>
				<br>
				<div class="card card-outline-info text-center" style="height: 48%">
					<div class="card-block" id="qHisDiv" style="height: 100%">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script src="../js/thirdParty/echarts.min.js" type="text/javascript" ></script>
<script src="../js/thirdParty/bootstrap-datetimepicker.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/thirdParty/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>

<script src="../js/mqMonitor.js" type="text/javascript"></script>

<script type="text/javascript" >
    var from_date = $("#from_date"),
        to_date    = $("#to_date"),
        $servInterval = $("#S_SERVICE_TYPE");
    searchMonitorButton = $("#searchMonitorButton");
    now = new Date(),
        preN = new Date(now.getTime() - 3600*1000),
        mm = undefined,
        serviceId = undefined;

    $(".breadcrumb>li>a").off("click").on("click",function(){
        if(mm) {
            mm.clear();
		}
        var $this = $(this);
        pageName = $this.data("load-page");
        $(".contextMenu").remove();
        if(pageName != ""){
            $mainContainer.load(pageName+".html",function(){
                initPage();
            });
        }
    });

    $('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });

    setDataInput(3600);

    $servInterval.bind("change", function () {
		var interval = $(this).val();
        setDataInput(interval);
    });

    function setDataInput(interval) {
        now = new Date();
        preN = new Date(now.getTime() - interval*1000);
		var nowStr = now.simpleFormat("yyyy-MM-dd hh:mm:ss"),
            prevStr = preN.simpleFormat("yyyy-MM-dd hh:mm:ss");
        from_date.val(prevStr);
        to_date.val(nowStr);
    }

	function init(servId) {
        mm = new MqMonitor({
            SERV_ID : servId,
            VB_TABLE_ELE : $("#vbCollectTable"),
            Q_TABLE_ELE  : $("#queueCollectTable"),
            VB_ECHART_ELE: $("#vbHisDiv"),
            Q_ECHART_ELE : $("#qHisDiv"),
            START_TS : preN.getTime(),
            END_TS : now.getTime()
        });
        serviceId = servId;
	}

    function searchService () {
        mm.clear();
        var startTs = new Date(from_date.val()),
			endTs   = new Date(to_date.val());
        mm = new MqMonitor({
            SERV_ID : serviceId,
            VB_TABLE_ELE : $("#vbCollectTable"),
            Q_TABLE_ELE  : $("#queueCollectTable"),
            VB_ECHART_ELE: $("#vbHisDiv"),
            Q_ECHART_ELE : $("#qHisDiv"),
            START_TS : startTs.getTime(),
            END_TS : endTs.getTime()
        });
	}

</script>
</html>
